<template>
  <div class="rating-detail">
    <el-table :data="ratingDetails" style="width: 100%" border>
      <el-table-column prop="rater" label="评分人" width="120" />
      <el-table-column label="评分" width="150">
        <template #default="{ row }">
          <el-rate
            v-model="row.score"
            disabled
            :max="10"
            show-score
            text-color="#ff9900"
            score-template="{value}分"
          />
        </template>
      </el-table-column>
      <el-table-column prop="comment" label="评价" />
      <el-table-column prop="time" label="时间" width="180" />
    </el-table>

    <el-pagination
      class="pagination"
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="fetchRatingDetails"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { RatingDetail } from '@/api/types/rating'

// 接收父组件传递的itemId
const props = defineProps<{
  itemId: number
}>()

// 评分详情数据
const ratingDetails = ref<RatingDetail[]>([])

// 分页配置
const pagination = ref({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

// 获取评分详情
const fetchRatingDetails = async () => {
  if (!props.itemId) return

  try {
    // 模拟数据
    const mockData: RatingDetail[] = Array.from({ length: 5 }, (_, i) => ({
      id: i + 1,
      rater: `用户 ${i + 1}`,
      score: Number((Math.random() * 5 + 5).toFixed(1)),
      comment: ['很好', '不错', '一般', '有待改进', '很棒'][i % 5],
      time: new Date().toLocaleString()
    }))

    ratingDetails.value = mockData
    pagination.value.total = 15
  } catch (error) {
    ElMessage.error('获取评分详情失败')
    console.error(error)
  }
}

// 每页条数变化
const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  fetchRatingDetails()
}

// 监听itemId变化
watch(() => props.itemId, (newVal) => {
  if (newVal) {
    fetchRatingDetails()
  }
}, { immediate: true })
</script>

<style scoped>
.rating-detail {
  padding: 10px;
}
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
